<template>
    <div class="page">
        <div class="head_fixed" ref="headFixed" >
            <!--标签-->
            <div class="menuTab-tag" :class="(tagView && tabTag.length) ? 'show' : 'hide'">
                <div class="menuTab-tag-list">
                    <div class="menuTab-tag-list-item"
                         v-for="(item,index) in tabTag"
                         v-bind:class="{ active : index===tabTagIndex }"
                         @click="selectTag(index,item.tag_id)"
                    >
                        {{item.tag_name}}
                    </div>
                    <img @click="closeMenuTab" class="menuTab-tag-list-close" src="../assets/close.png">
                </div>
            </div>
            <div class="menuTab-sort-list" v-bind:class="sort ? 'show': 'hide'">
                <div class="menuTab-sort-list-item"
                     v-for="(item,index) in sortArr"
                     @click="selectSort(index)"
                >
                    <div>{{item.title}}</div>
                    <img v-if="sortIndex==index" src="../assets/city-head-sort-ok.png" class="menuTab-sort-list-item-img"/>
                </div>
            </div>
        </div>
        <div class="head_bg" :style="{backgroundImage:'url('+coverImgUrl +')'}">
            <div class="gettheme-box">
                <div class="selectwrap">
                    <div class="select-occupied "  @click="sh_select" v-model="outdoorname">{{outdoorname}}</div><!--{{outdoorname}}-->
                    <div @click="sh_select">
                        <div class="testt" v-if="!show_nickname" >
                            <div v-for="(item,index) in LifeGoods" :key="index"  @click="selectSubTypeFn(item.id,item.name)" infinite-scroll-disabled="loading" infinite-scroll-distance="50"> <!--@click = “clickfun($event)”-->
                                <p>{{item.name}}</p>
                            </div>
                        </div>
                    </div>
                <div class="gettheme-arrow" v-if="show_nickname" @click="sh_select"><img src="../assets/getthemegoods-arrow.png" alt=""></div>
                <div class="gettheme-arrow" v-if="!show_nickname" @click="sh_select"><img src="../assets/getthemegoods-arrow-top.png" alt=""></div>
                </div>
                <!--<div class="gettheme-arrow-des">
                    <p>户外探险</p>
                    <p>保持年轻，最简单的方式是：背起行囊。</p>
                </div>-->
            </div>

        </div>
        <!--<div style="height: 30px;padding: 20px;background: darkorange;color: #ffffff;">主题列表</div>-->
        <div class="rec">
            <div class="rec-title">{{recTitname}}&nbsp&nbsp</div>
            <span class="rec-long"></span>
            <div class="rec-subtitle">&nbsp&nbsp{{recTitdescribe}}</div>
        </div>
        <div class="city loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
            <div class="city-list" v-infinite-scroll="getProducts" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
                <div v-for="(item,index) in products" class="city-list-item">
                    <router-link :to="'/show/'+item.goods_id">
                        <img class="city-list-item-img" :src="item.image"/>
                        <div class="city-list-item-tag">
                            <span v-if="item.popular==1">热门</span>
                            <span v-if="item.recommend==1">立即出票</span>
                        </div>
                        <div class="city-list-item-goodstag" v-if="item.goodstag">
                            <span>{{item.goodstag}}</span>
                        </div>
                        <div class="city-list-item-cityName" v-if="city_name">
                            <img src="../assets/city-head-map.png"/>
                            <span>{{city_name}}</span>
                        </div>
                        <div class="city-list-item-t1">{{item.name}}</div>
                        <div class="city-list-item-t2">{{item.subTitle}}</div>
                    </router-link>
                    <div class="city-list-item-price">¥ {{item.jiage}} <span class="old">{{item.yuanjia}}</span></div>
                    <!--<div class="city-list-item-date">最早可预订日期：{{item.zuizao}}</div>-->
                    <div class="city-list-item-sellInfo">
                        <div class="city-list-item-sellInfo-sell">已售：{{item.order_num}}</div>
                        <div class="city-list-item-sellInfo-comment">
                            <img class="city-list-item-sellInfo-comment-img" src="../assets/icon-comment22.png" alt="">
                            {{item.comment_num}}
                        </div>
                    </div>
                    <!--<img class="city-list-item-heart" @click="collectionFun(index,item.goods_id)"  :src="item.collection==1 ? collection.imgHover : collection.img"/>-->
                </div>
            </div>
            <div v-show="loading && !loadEnd" class="loadmore-loading">
                <mt-spinner type="fading-circle" style=" display: inline-block;vertical-align: middle;margin-right: 5px;"></mt-spinner>
                加载中...
            </div>
            <div v-show="loadEnd" class="loadmore-loading">
                暂无更多数据...
            </div>
        </div>
        <TabBar ref="tabBar" :curr="tabCurr"></TabBar>

    </div>
</template>

<script type="text/ecmascript-6">
    import { Toast,InfiniteScroll,Spinner} from 'mint-ui';
    import headerTab from '../components/header-tab.vue'
    import TabBar from "../components/TabBar"
    import config from "../store/config"
    import storage from "../store/localstorage"
    import wxShare from "../store/wxShare"
    import { mapState } from 'vuex'

    export default {
        name: "City",
        components: {
            headerTab,
            TabBar,
        },
        data() {
        return {
            coverImgUrl:'',//定义背景图的容器
            recTitname:'',
            recTitdescribe:'',
            outdoorname:'',
            selectId:'',//下拉主题选中的id
            LifeGoods:[],
            show_nickname:true,
            show_select:false,
            url: config.url,
            city_id: '',
            city_name: '',
            tabCurr: 0,
            tabConfig: {
                sub: {
                    arr: [], //{cn_name: '所有', id: 0},
                    activeIndex: 2
                }
            },
            menuTabIndex: 2,
            tabTag: [],
            tabTagIndex: '',
            tabTag_id: 0,
            tagView: false,
            sort: false,//默认不显示排序选项
            sortArr: [
                {title: '默认', key: '', val: ''},
                {title: '北美热门活动', key: 'popular', val: 1},
                // {title: '北美玩乐推荐', key: 'recommend', val: 1},
                {title: '立即出票活动', key: 'recommend', val: 1},
                {title: '价格从低到高', key: 'sort', val: 1},
                {title: '价格从高到低', key: 'sort', val: 2}
            ],
            sortIndex: 0,

            collection: {
                img: require('../assets/city-head-heart.png'),
                imgHover: require('../assets/city-head-heart-hover.png')
            },
            // 分页参数
            products: [],
            totalPage: 0,
            pageSize: 10,
            page: 1,
            loadEnd: false,  // 为 true， bottom-method 就不会再次执行加载更多
            loading: false,
            wrapperHeight: 0,
            translate: 0,
            moveTranslate: 0,
            weatherData:{},
        }
    },
    computed: mapState({
        appNestState: state => state.appNestState,
    }),
    methods: {
        selectSubType(subType) {
            if (this.menuTabIndex != subType) {
                this.tabTagIndex = '';
            }
            this.menuTabIndex = subType;
            //if (subType != 0) {
            this.sort = false;
            this.tagView = true;
            this.page = 1;
            this.products = [];
            this.loadDataMore();
            //}
        },
        openSort() {
            this.tagView = false;
            this.sort = !this.sort;
        },
        selectSort(val) {
            this.sortIndex = val;
            this.sort = false;
            this.page = 1
            this.products = []
            this.loadDataMore()
        },
        selectTag(val, tag_id) {
            this.tabTagIndex = val;
            this.tabTag_id = tag_id;
            this.tagView = false;
            this.page = 1
            this.products = []
            this.loadDataMore()
        },
        closeMenuTab() {
            this.tagView = false;
        },
        loadData() {
            setTimeout(() => {
                this.products = [];
                this.getProducts();
                //this.$refs.loadmore.onTopLoaded();
            }, 500);
        },
        loadDataMore() {
            setTimeout(() => {
                this.getProducts();
                //this.$refs.loadmore.onBottomLoaded();
            }, 300);
        },
        // 获取tab分类、tag
        getTab() {
            this.axios.get('wapclassify')
                    .then(res => {
                var tabarr = res.data.classify.map(item => {
                    return {cn_name: item.classify_name, id: item.classify_id};
                })
                tabarr.unshift({cn_name: '所有', id: 0});
                this.tabConfig.sub.arr = tabarr
                this.tabTag = res.data.tag
            })
        .catch(err => console.log(err));
        },
        //下拉列表
        getProducts() {
            let _that = this;
            _that.selectId = _that.$route.params.id;
            let params = {
                city_id: _that.city_id,
                classify_id: _that.menuTabIndex,
                tag_id: _that.tabTag_id,
                pagelimit: _that.pageSize,
                pagenum: _that.page,
                theme_id:_that.$route.params.id,
            }
            if (_that.sortIndex) {
                let obj = _that.sortArr[_that.sortIndex];
                this.$set(params, obj.key, obj.val)
            } else {
                this.$set(params, 'sort', '0')
            }
            _that.loading = true;
            _that.axios.postAll('getthemegoods', params)
                    .then(res => {
                if (res) {
                    if (res.data.code == 0) {
                        let products = _that.products;
                        let productstext = JSON.stringify(products);
                        var reg = /^(http|https):\/\//;
                        res.data.data.goods.forEach(item => {
                            if (productstext.indexOf(JSON.stringify(item)) == -1) {
                                //console.log(reg.test(item.image))
                                if (!reg.test(item.image)) {
                                    item.image = _that.url + item.image
                                }
                                products.push(item);
                            }
                        })
                        _that.page += 1
                        _that.totalPage = res.data.data.totalpage
                        _that.products = products;
                        /*保存小title和描述*/
//                        _that.recTit=res.data.data.theme
                        _that.recTitname=res.data.data.theme.name
                        _that.recTitdescribe=res.data.data.theme.describe
                        /*保存当前选中得主题name*/
                        _that.outdoorname=res.data.data.theme.name
                        /*保存背景图*/
                        _that.coverImgUrl= (!reg.test(res.data.data.theme.background) && res.data.data.theme.background) ? _that.url + res.data.data.theme.background : res.data.data.theme.background;
                        if (_that.page <= _that.totalPage) {
                            _that.loading = false;
                            _that.loadEnd = true;
                        }
                        if (res.data.data.goods.length < _that.pageSize) {
                            _that.loadEnd = true;
                        }
                        this.share();
                    } else {
                        _that.loadEnd = true;
                    }
                }
            })
        .catch(err => {
                console.log(err)
            });
        },
        // 收藏
        collectionFun(index, goods_id) {

            if (!this.$store.state.token) {
                this.$router.push({path: "/my-login"})
                return;
            }
            this.axios.post('wapcollection', {'goods_id': goods_id})
                    .then(res => {
                Toast({message: res.msg, duration: 1000});
                this.products[index].collection = !this.products[index].collection;
            })
        .catch(err => console.log(err));
        },
        getCityWeather(){
            this.axios.postAll('wapweather', {'city_id': this.city_id})
                    .then(res => {
                if(res.data.code == 0){
                    this.weatherData = res.data.data[0];
                }
            })
        .catch(err => console.log(err));
        },
        // 分享
        share() {
            let path = this.$route.name + '/' + this.selectId;
            let uid = storage.get('userinfo') ? "?uid=" + storage.get('userinfo').member_id : '';
            let linkUrl = config.url + '/quick_help_wap1/#' + path + uid;
            wxShare({
                title: '[快帮行]-'+this.outdoorname, // 分享标题
                desc: '快帮行，玩点不一样！', // 分享描述
                link: linkUrl, // 分享链接
                imgUrl: this.coverImgUrl, // 分享图标
                debug: false
            }, function () {//分享成功后的回调函数
                //Toast({message: '分享成功！', duration: 1500});
                console.log('分享成功')
            });
        },
        //下拉菜单
        selectPamas(){
            this.show_nickname=!this.show_nickname;
        },
        sh_select(){
            this.show_select=!this.show_select; /**/
            this.show_nickname=!this.show_nickname
        },
        show(){
            document.getElementById('words').style.display = 'block';
        },
        ange(){
            var option = this.options[this.selectedIndex];
            document.getElementById('show').value = option.innerHTML;
         document.getElementById('words').style.display = 'none';
        },
        getLifeGoods(){ // LifeGoods 体验生活
            this.axios.post('/api/theme/getList').then(res => {
                // this.LifeGoods = res.data.goods;
                var reg = /^(http|https):\/\//;
                res.data.forEach(item => {
                    if (!reg.test(item.image)) {
                        item.image = this.url + item.image
                    }
                    this.LifeGoods.push(item);
                })
            }).catch(err => console.log(err))

        },
        /*下拉菜单请求*/
        selectSubTypeFn(id,name){
            var _that = this;
            //清空数组,name,和背景图
            _that.outdoorname=name;
            _that.selectId=id;
            _that.products=[];
            _that.coverImgUrl='';
            _that.recTitname='';
            _that.recTitdescribe='';
            let params = {
                city_id: _that.city_id,
                classify_id: _that.menuTabIndex,
                tag_id: _that.tabTag_id,
                pagelimit: _that.pageSize,
                pagenum: _that.page,
                theme_id:id,
            }
            if (_that.sortIndex) {
                let obj = _that.sortArr[_that.sortIndex];
                this.$set(params, obj.key, obj.val)
            } else {
                this.$set(params, 'sort', '0')
            }
            _that.loading = true;
            _that.axios.postAll('getthemegoods', params)
                    .then(res => {
                if (res) {
                    if (res.data.code == 0) {
                        let products = _that.products;
                        let productstext = JSON.stringify(products);
                        var reg = /^(http|https):\/\//;
                        res.data.data.goods.forEach(item => {
                            if (productstext.indexOf(JSON.stringify(item)) == -1) {
                                //console.log(reg.test(item.image))
                                if (!reg.test(item.image)) {
                                    item.image = _that.url + item.image
                                }
                                products.push(item);
                            }
                        })
                        _that.page += 1
                        _that.totalPage = res.data.data.totalpage
                        _that.products = products;
                        _that.recTitname=res.data.data.theme.name
                        _that.recTitdescribe=res.data.data.theme.describe
                        /*保存当前选中得主题name*/
                        _that.outdoorname=res.data.data.theme.name
                        /*保存背景图*/

                        _that.coverImgUrl= (!reg.test(res.data.data.theme.background) && res.data.data.theme.background) ? _that.url + res.data.data.theme.background : res.data.data.theme.background;
                        if (_that.page <= _that.totalPage) {
                            _that.loading = false;
                            _that.loadEnd = true;
                        }
                        if (res.data.data.goods.length < _that.pageSize) {
                            _that.loadEnd = true;
                        }
                        this.share();
                    } else {
                        _that.loadEnd = true;
                    }
                }
            })
        .catch(err => {
                console.log(err)
            });
        }
    },
    mounted() {
        let _that = this;
        let query = this.$route.query;
        for (let key in query) {
            _that[key] = decodeURI(query[key]);
        }
        // _that.getTab() //获取tab分类、tag
        //this.loadData();
        this.wrapperHeight = document.body.clientHeight - this.$refs.headFixed.offsetHeight - (!this.appNestState ?this.$refs.tabBar.$el.offsetHeight : 0);
        document.body.scrollTop = document.documentElement.scrollTop = 1;
        // _that.getCityWeather();
        _that.getLifeGoods()
    },
    created(){
        if(sessionStorage.tagIndex){
            this.menuTabIndex = Number(sessionStorage.tagIndex);
            this.tabConfig.sub.activeIndex = Number(sessionStorage.tagIndex);
        }
    },
    beforeRouteLeave(to, from, next) {
        if (to.name == "show") {
            sessionStorage.tagIndex = this.menuTabIndex;
            next();
        }else{
            sessionStorage.removeItem("tagIndex");
            next();
        }
    }
    }

</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .select-occupied{
        padding: rpx(13) rpx(5) rpx(5) rpx(5);
        color:rgb(255,255,255);
        width: rpx(150);
        height: rpx(50);
        font-size: rpx(30);
        background: rgba(0, 0, 0, 0.01);
    }
    .testt{
        padding:rpx(15) rpx(4) rpx(13) rpx(4);
        background: rgba(0, 0, 0, 0.2);
        width: rpx(180);
        height: rpx(360);
        max-height:rpx(360);
        overflow: auto;
        position: absolute;
       top:rpx(75);
    }
    .testt p{
        padding-top: rpx(10);
        padding-bottom: rpx(15);
        color:rgb(255,255,255) ;
        font-size: rpx(30);

    }
    #words{
        display: none;
    }
    .gettheme-box{
        padding-top: rpx(26);
        padding-left: rpx(37);
    }
    .selectwrap{
        width: rpx(180);
        max-height:rpx(50);
        background: rgba(0,0,0,0.2);
    }
    option{

        background: rgb(138, 147, 154);
        /*height: rpx(200);*/
    }
    .gettheme-arrow{
        position: absolute;
        display: inline-block;
        left: rpx(180);
        top: rpx(34);
    }
    .gettheme-arrow img{
        width: rpx(30);
    }
    /*清空下拉菜单默认样式*/
    select {
        font-size: rpx(32);
        width: rpx(110);
        height: rpx(50);
        background: rgba(0,0,0,0.01);
        color: rgb(255,255,255);
        /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
        /*border: solid 1px rgba(0,0,0,0.2);*/
        /*很关键：将默认的select选择框样式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
    }
    .page {
        background: $bgcolor1;
    }
    .head_bg{
        position: relative;
        height: rpx(550);
        width: 100%;
        background-size: 100%;
        background: linear-gradient(to left top,rgba(0,0,0,0),rgba(0,0,0,0.2)); /*url(../assets/gettheme-box-bg.jpg)*/
        background-repeat: round;
    }
    .rec {
        margin-bottom: rpx(-35);
        padding: 0 rpx(20) 0;
            &-title {
                display: inline-block;
                font-size: rpx(40);
                font-weight: bold;
                padding: rpx(60) 0 rpx(40) rpx(10);
            }
            &-long {
                position: relative;
                top: rpx(7);
                display: inline-block;
                width: 1px;
                height: rpx(45);
                font-size: rpx(40);
                font-weight: bold;
                background: #000000;
            }
            &-subtitle{
                 display: inline-block;
                 font-size: rpx(28);
                 color:rgb(51,51,51);
             }
    }
    .gettheme-arrow-des{
        position: absolute;
        bottom: rpx(50);
    }
    .gettheme-arrow-des p:nth-child(1){
        font-size: rpx(56);
        color: rgb(255,255,255);
        padding-bottom: rpx(18);
    }
    .gettheme-arrow-des p:nth-child(2){
        font-size: rpx(32);
        color: rgb(255,255,255);
    }

    .menuTab {
        position: relative;
        height: rpx(100);
        overflow: hidden;
        background: $color0;
            &-sort {
                 position: absolute;
                 top: 0;
                 right: 0;
                 z-index: 9999;
                 width: rpx(70);
                 height: rpx(100);
                 padding-top: rpx(30);
                 padding-left: rpx(10);
                 font-size: rpx(34);
                 color: #696969;
            &-img {
                 width: rpx(32);
                 height: rpx(32);
                 margin-left: rpx(10);
             }

            &-list {
                 position: absolute;
                 top: rpx(200);
                 right: 0;
                 left: 0;
                 padding: rpx(30) 0 rpx(60);
                 background: $color0;
                 z-index: 9999;
                &-item {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 padding: rpx(30);
                 font-size: rpx(30);
                 border-bottom: solid 1px $color2;
                &-img {
                     width: rpx(32);
                     height: rpx(32);
                 }
                }
            }

        }
        &-tag {
             position: absolute;
             top: rpx(200);
             right: 0;
             left: 0;
             padding: rpx(30) 0 rpx(30) rpx(30);
             background: $color0;
             z-index: 9999;
                &-list {
                     display: flex;
                     flex-wrap: wrap;
                        &-item {
                             margin-right: 3%;
                             margin-bottom: rpx(30);
                             overflow: hidden;
                             width: 30%;
                             height: rpx(60);
                             line-height: rpx(60);
                             background: $bgcolor1;
                             border-radius: rpx(30);
                             font-size: rpx(30);
                             color: $color5;
                             text-align: center;
                            &.active {
                                 background: $color3;
                                 color: $color0;
                             }
                         }
                        &-close{
                             position: absolute;
                             bottom: rpx(-64);
                             left: 50%;
                             margin-left: rpx(-16);
                             width: rpx(32);
                             height: rpx(32);
                         }
                    }
        }
    }
    .loadmore-wrapper{
       /* margin-top: -1px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;*/
    }
    .loadmore-loading{
        text-align: center;
        height: rpx(120);
        line-height:  rpx(120);
        color: $color5;
    }
    .loadmore-loading div {
        display: inline-block;vertical-align: middle;margin-right: 5px;
    }
    .city {
        &-list {
             padding: rpx(30);
                &-item {
                     position: relative;
                     background: $color0;
                     padding-bottom: rpx(30);
                     border-radius: rpx($radius6);
                     margin-bottom: rpx(30);
                        &-img {
                             width: 100%;
                             height: rpx(380);
                             border-radius: rpx($radius6) rpx($radius6) 0 0;
                             z-index: 1;
                         }
                        &-tag{
                             position: absolute;
                             right: rpx(20);
                             top: rpx(20);
                             z-index: 2;
                                span{
                                    display: inline-block;
                                    margin-right: rpx(20);
                                    min-width:rpx(90);
                                    padding: 0 rpx(10);
                                    height:rpx(40);
                                    line-height: rpx(40);
                                    border-radius: $radius6;
                                    background: $color3;
                                    text-align: center;
                                    font-size: rpx(24);
                                    color: $color0;
                                }
                        }
                        &-goodstag{
                             position: absolute;
                             left: rpx(20);
                             top: rpx(320);
                             z-index: 2;
                                span{
                                    display: inline-block;
                                    height:rpx(40);
                                    line-height: rpx(40);
                                    border-radius: $radius6;
                                    background: #F77D47;
                                    text-align: center;
                                    font-size: rpx(24);
                                    color: $color0;
                                    padding: 0 rpx(10);
                                }
                     }
                        &-cityName{
                             position: absolute;
                             right: rpx(20);
                             top: rpx(325);
                             z-index: 2;
                                img{
                                    width: rpx(28);
                                    height: rpx(28);
                                }
                                span{
                                    display: inline-block;
                                    color: $color0;
                                    padding: 0 rpx(5);
                                    font-size: rpx(20);
                                }
                        }
                        &-t1 {
                             padding-left: rpx(30);
                             padding-top: rpx(30);
                             font-weight: bold;
                             font-size: rpx(36);
                             line-height: 160%;
                         }
                        &-t2 {
                             padding-left: rpx(30);
                             padding-top: rpx(10);
                             font-size: rpx(26);
                             line-height: 160%;
                         }
                        &-price {
                             padding-left: rpx(30);
                             padding-top: rpx(10);
                             font-size: rpx(36);
                             color: $color3;
                                .old {
                                    padding-left: rpx(10);
                                    font-size: rpx(24);
                                    color: $color5;
                                    text-decoration: line-through;
                                }
                        }
                        &-date {
                             padding-left: rpx(30);
                             padding-top: rpx(10);
                             font-size: rpx(26);
                             color: $color4;
                         }
                        &-heart {
                             position: absolute;
                             bottom: rpx(28);
                             right: rpx(30);
                             width: rpx(32);
                             height: rpx(32);
                         }
                            &-sellInfo {
                                 position: absolute;
                                 bottom: rpx(26);
                                 right: rpx(15);
                                 min-width: rpx(280);
                                 height: rpx(32);
                                 font-size: rpx(28);
                                 color: #999;
                                 text-align: right;
                                    >div{
                                         display: inline-block;
                                     }
                                    &-sell{
                                         margin-right: rpx(22);
                                     }
                                    &-comment {
                                         color: #999;
                                    &-img {
                                         width: rpx(32);
                                         height: rpx(32);
                                     }
                                    }
                            }

                 }
            }
    }


</style>